<%--
  Created by IntelliJ IDEA.
  User: 29276
  Date: 2021/8/21
  Time: 10:04
  To change this template use File | Settings | File Templates.
--%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    //http://localhost:8080/01_sxtoa_war_exploded/
%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <base href="<%=basePath%>"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <link href="css/select.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.idTabs.min.js"></script>
    <script type="text/javascript" src="js/select-ui.min.js"></script>
    <script type="text/javascript" src="editor/kindeditor.js"></script>
    <script type="text/javascript">
        $(document).ready(function(e) {
            $(".select1").uedSelect({
                width : 345
            });

        });
    </script>
    <script type="text/javascript">
        function addPhoto(){
            //获取上传图片li
            var li = $("#uploadphoto");
            //console.info(li);
            //准备添加的dom对象
            var content=$("<span><label>&nbsp;</label><input name='photo' type='file' class='dfinput' /><i></i>"+
                "<input type='button'  class='btn'  value='删除' onclick='removeCurrSpan(this)'/></span>");
            //加入到指定位置
            li.append(content);
        }

        function removeCurrSpan(obj){
            $(obj).parent().remove();

        }

        function addExpenseItem(id){
            //获取上级标签
            var table = $(id);

            //创建当前标签
            var content = $('<tr>'+
                '<td><div class="vocation"><select name="type" class="select1">'+
                '<option>通信费用</option><option>办公室耗材</option><option>住宿费用</option><option>房租水电</option>'+
                '</select></div></td>'+
                '<td><input name="amount" type="text" class="dfinput" /><i></i></td>'+
                '<td><input name="itemDesc" type="text" class="dfinput" /><i></i></td>'+
                '<td><input type="button"  class="btn"  value="删除" onclick="removeCurrItem(this)"/></td></tr>');

            //加入上级标签
            table.append(content);
            $(".select1").uedSelect({
                width : 345
            });
        }

        function removeCurrItem(obj){
            $(obj).parent().parent().remove();

        }
    </script>

    <script type="text/javascript">
        $(function () {
            $("#btn").click(function () {
                var reqDate = $("#expenseFm").serialize();
                $.post("expenseServlet", reqDate, function (data) {
                    if (data === "sessionTimeOut") {
                        window.location.href="login.jsp";
                        return;
                    }
                    if (eval(data)) {
                        alert("提交成功");
                    } else {
                        alert("提交失败");
                    }
                })
            })
        })
    </script>
</head>

<body>

<div class="place">
    <span>位置：</span>
    <ul class="placeul">
        <li><a href="#">报销管理</a></li>
        <li><a href="#">添加报销</a></li>
    </ul>
</div>

<div class="formbody">

    <div class="formtitle"><span>基本信息</span></div>

    <form id="expenseFm">
        <input  name="methodName" type="hidden" value="expenseAdd"/>
        <ul class="forminfo">

        <li>
            <label>具体报销项</label>
            <input type="button"  class="btn"  value="添加报销项" onclick="addExpenseItem('#table1')"/>

            <table border="" cellspacing="" cellpadding="" width="70%" id="table1">
                <tr>
                    <td>报销类型</td>
                    <td>报销费用</td>
                    <td>费用说明</td>
                </tr>
                <tr>
                    <td>
                        <div class="vocation">
                            <select name="type" class="select1">
                                <option value="通信费用">通信费用</option>
                                <option value="办公室耗材">办公室耗材</option>
                                <option value="住宿费用">住宿费用</option>
                                <option value="房租水电">房租水电</option>
                                <option value="其他">其他</option>
                            </select>
                        </div>
                    </td>
                    <td><input name="amount" type="text" class="dfinput" /><i></i></td>
                    <td><input name="itemDesc" type="text" class="dfinput" /><i></i></td>
                    <td>&nbsp;</td>
                </tr>
            </table>
        </li>
        <li>

        </li>

        <li>
            <label>审批人<b>*</b></label>
            <div class="vocation">
                <input name="mgrId" type="text" class="dfinput" value="${sessionScope.emp.mgrId}" />
            </div>
        </li>
        </li>
        <li>
            <label>总备注信息</label>
            <textarea name="expDesc" cols="" rows="" class="textinput"></textarea>
        </li>
        <li>
            <label>&nbsp;</label>
            <input id="btn" name="" type="button" class="btn" value="确认保存" />
        </li>
    </ul>
    </form>
</div>

</body>

</html>
